<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('运费')" />
</head>
<style>
    .se{
        width: 30%;
        float: left;
        margin: 5px 5px 5px 5px;
    }

    .ina{
        width: 60%;
        float: left;
        text-align: center;
        margin: 5px 5px 5px 5px;
    }

</style>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" id="form-goodsPostFee-add">
                        <input id="goodsId" name="goodsId" type="hidden" th:value="${goodsId}">

                        <button id="groupAdd" type="button" class="btn btn-primary"><i class="fa fa-plus mr5"></i>添加运费组</button>
                        <div style="display: block;">
                            <p style="color: red;display: block;">注意：此处没有设置运费的地区，运费按照商品设置里的运费来计算</p>
                        </div>
                        <div style="width: 100%;overflow: hidden;">
                            <div style="width: 30%; float: left;text-align: center">
                                省份
                            </div>
                            <div style="width: 60%; float: left;text-align: center">
                                运费金额
                            </div>
                        </div>
                        <div id="ccc">
                            <div class="can shili" style="overflow: hidden;" th:each = "list:${postList}" >
                                <input type="text" value="" placeholder="省份关键字" required="required"  class="form-control se" th:value="${list.name}">
                                <input type="text" value="" placeholder="运费金额" required="required"  class="form-control ina" th:value="${list.postFee}">
                                <div class="del fa fa-remove" onclick="del(this)" style="cursor:pointer;float: left;margin: 15px 15px;" title="删除"></div>
                            </div>
                            <input id="datail" name="datail" type="hidden" value="">
                        </div>

                        <!--<div class="form-group">-->
                            <!--<div class="col-sm-8 col-sm-offset-3">-->
                                <!--<button type="submit" class="btn btn-primary">提交</button>-->
                            <!--</div>-->
                        <!--</div>-->


                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<script th:inline="javascript">
    $().ready(function() {
        var str = '<div class="can shili" style="overflow: hidden;">'+
                        '<input type="text" value="" placeholder="省份关键字" required="required"  class="form-control se" >'+
                        '<input type="text" value="" placeholder="运费金额" required="required"  class="form-control ina" >'+
                        '<div class="del fa fa-remove" onclick="del(this)" style="cursor:pointer;float: left;margin: 15px 15px;" title="删除"></div>'+
                   '</div>'
        //添加物流
        $('#groupAdd').on('click', function() {
            $('#ccc').append(str);
        })
    });
    function del(a) {
        console.log($(a).parent());
        $(a).parent().remove();
    }
</script>
<script type="text/javascript">
    var prefix = ctx + "system/goods";
    $("#form-goodsClass-add").validate({
        focusCleanup: true
    });

    function submitHandler() {
        if ($.validate.form()) {
            var se = document.getElementsByClassName('se');
            var ina = document.getElementsByClassName('ina');
            var datail = [];
            for (var i=0; i<se.length; i++) {
                var shipping = "";
                var seI = se[i].value;
                var inaI = ina[i].value;
                if (seI == "" || inaI == "") {
                    layer.msg("输入框不能有空");
                    return;
                }
                shipping = seI;
                shipping += ":"+inaI
                datail.push(shipping);
            }
            console.log("se.length:"+se.length);
            console.log("datail:"+datail);
            $("#datail").val(datail);
            $.operate.save(prefix + "/setPostFee", $('#form-goodsPostFee-add').serialize());
        }
    }
</script>
</body>
</html>
